<template>
	<view class="container">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color"
		style="
		justify-content:space-between;
		padding-top: 20rpx;
		margin-bottom: 10rpx;
		">
			<u-subsection 
			:list="list" 
			@change="sectionChange" 
			:bold="bold"
			:active-color="activeColor"
			:current="current" 
			:mode="mode"
			style="width: 80%;padding-left: 10%;"
			height="65"
			font-size="25"
			></u-subsection>
		</view>
		<view class="type-list">
			<view class="expenditure-list" v-if="current == 0">
				<view v-for="(item, index) in expenditure_list" :key="index" style="text-align: center;" @click="selectItem(item.id)">
					<view class="list-box" :class="[select_item==item.id ? 'select-item':'']">
						<image slot="icon" class="box-icon" :src="item.icon" mode="" :lazy-load="lazy_load"></image>
					</view>
					<view class="box-text">{{item.text + item.id}}</view>
				</view>
			</view>
			<view class="income-list" v-else>
				<view v-for="(item, index) in income_list" :key="index" style="text-align: center;" @click="selectItem(item.id)">
					<view class="list-box" :class="[select_item==item.id ? 'select-item':'']">
						<image slot="icon" class="box-icon" :src="item.icon" mode="" :lazy-load="lazy_load"></image>
					</view>
					<view class="box-text">{{item.text}}</view>
				</view>
			</view>
		</view>
		
		<!-- 弹出框 -->
		<u-popup 
		border-radius="10" 
		v-model="popup_show"	
		@close="popupClose" 
		@open="popupOpen" 
		:mode="popup_mode" 
		length="60%" 
		:mask="popup_mask"
		:closeable="popup_closeable"
		:close-icon-pos="popup_closeIconPos"
		style="margin: 30rpx;"
		>
			<view class="popup_box">
				<view class="popup_line">
					<input type="digit" :value="value" placeholder="0.00" 
					style="font-size: 50rpx;
					min-height: 100rpx; 
					height: 100rpx;
					width: 50%;"
					@input="onInput"
					@confirm="onConfirm"
					 />
					<image slot="icon" @click="clickImg()" class="photo_icon" :src="img" mode=""></image>
					
					<view v-show="img != empty_img">
						<view class="del-btn" @click="delImg()">
							<uni-icons :color="iconclear.color" :size="iconclear.size" :type="iconclear.type" />
						</view>
					</view>
				</view>
				
				<u-line :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
				
				<view class="popup_line">
					<image slot="icon" class="popup_icon" :src="iconList.add_bill_time" mode="" :lazy-load="lazy_load"></image>
					<text class="popup_type">日期</text>
					<view style="font-size: 28rpx;font-weight: 600;" @click="clickDate()">
						{{picker_time}}
						<u-icon name="arrow-right" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
					</view>
				</view>
				<view class="popup_line">
					<image slot="icon" class="popup_icon" :src="iconList.add_bill_type" mode="" :lazy-load="lazy_load"></image>
					<text class="popup_type">分类</text>
					<view style="font-size: 25rpx;font-weight: 600;">
						{{show_item_text}}
					</view>
				</view>
				
				<view class="popup_line">
					<image slot="icon" class="popup_icon" :src="iconList.add_bill_desc" mode="" :lazy-load="lazy_load"></image>
					<text class="popup_type">备注</text>
					<input type="text" :value="desc" @input="onDescInput" placeholder="添加备注" style="font-size: 28rpx;width: 70%;" />
				</view>
				
				<view style="display: flex; padding: 20rpx;">
					<view style="margin: auto;">
						<u-button 
						type="success" 
						size="medium" 
						:disabled="submitStatus" 
						@click="submit"
						
						>保存</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-picker mode="time" v-model="picker_show" :params="picker_params" :default-time="picker_time" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script setup>
import { ref } from "vue"
const list = ref(['支出','收入'])
const current = ref(0)
const bold = ref(false)
const activeColor = ref("#2d2d2d")
const mode = ref("subsection")
const select_item = ref(-1)
const popup_show = ref(false)
const popup_mode = ref('bottom')
const popup_mask = ref(true)
const popup_closeable = ref(false)
const popup_closeIconPos = ref('top-right')
const direction = ref('row')
const hairLine = ref(true)
const length = ref('100%')
const color = ref("#d8d8d8")
const borderStyle = ref('solid')
const photo_show = ref(true)
const submitStatus = ref(true)
const picker_params = ref({
    year: false,
    month: true,
    day: true,
    hour: false,
    minute: false,
    second: false
})
const picker_show = ref(false)
const picker_time = ref("")
const month = ref("")
const day = ref("")
const value = ref("")
const desc = ref("")
const show_item_text = ref("")
const expenditure_list = ref([
  {"id":"0","text":"医疗","icon":"../../static/type/6.png"},
  {"id":"1","text":"衣服","icon":"../../static/type/1.png"},
  {"id":"2","text":"蔬菜","icon":"../../static/type/2.png"},
  {"id":"3","text":"礼金","icon":"../../static/type/3.png"},
  {"id":"4","text":"捐款","icon":"../../static/type/4.png"},
  {"id":"5","text":"水果","icon":"../../static/type/5.png"},
  
  {"id":"-999","text":"设置","icon":"../../static/setting.png"}
])
const income_list = ref([
  {"id":"0","text":"薪资","icon":"../../static/type/1.png"},
  {"id":"1","text":"兼职","icon":"../../static/type/2.png"},
  {"id":"-999","text":"设置","icon":"../../static/setting.png"}
])
const empty_img = ref('../../static/empty-img.png')
const img = ref('')
const iconclear = ref({
  color : "red",
  size: '20',
  type: 'clear'
})
const lazy_load = ref(true)
const iconList = ref({
  add_bill_time:'../../static/add_bill_time.png',
      add_bill_type:'../../static/add_bill_type.png',
      add_bill_desc:'../../static/add_bill_desc.png',
      user_bill:'../../static/user_bill.png',
      user_feedback:'../../static/user_feedback.png',
      user_kefu:'../../static/user_kefu.png',
      user_time:'../../static/user_time.png',
      user_type:'../../static/user_type.png'
})
function sectionChange(index){
  current.value = index;
  select_item.value = -1;
}
function selectItem(index){

  if(current.value == 0 && (index == (expenditure_list.value[expenditure_list.value.length-1].id))){
    select_item.value = -1;
    return;
  }
  if(current.value == 1 && (index == (income_list.value[income_list.value.length-1].id))){
    select_item.value = -1;
    return;
  }

  select_item.value = index;

  popup_show.value = true;

  initValue();

  show_item_text.value = (current.value == 0) ? expenditure_list.value[index].text : income_list.value[index].text;
}
function popupClose(){

}
function popupOpen(){

}
function clickDate(){
  picker_show.value = true;
}
function pickerConfirm(e) {
  if (picker_params.value.month) month.value = e.month;
  if (picker_params.value.day) day.value = e.day;

  picker_time.value = month.value + "-" + day.value;
}
function onInput(e){
  let v = e.detail.value;
  v = v.replace(/^\D*([1-9]\d{0,6}\.?\d{0,2})?.*$/,'$1');
  value.value = v;
  if(v>0){
    submitStatus.value = false;
  }else{
    submitStatus.value = true;
  }
  return v;
}
function onDescInput(e){
  desc.value = e.detail.value;
}
// 把按钮状态改为禁止，开启加载动画
function submit(){
  setTimeout(() => {
    uni.switchTab({
        url: '/pages/index/index'
    });
  }, 500)
}
function initValue(){
  value.value = "";
  desc.value = "";
  submitStatus.value = true;
  img.value = empty_img.value;

  let t = new Date().toISOString().slice(0, 10);
  let t_a = t.split("-");
  month.value = t_a[1] || "";
  day.value = t_a[2] || "";
  picker_time.value = month.value + "-" + day.value;
}
function clickImg(){
  if(img.value == empty_img.value){
    uploadImg();
  }else{
    previewImg();
  }
}
function delImg(){
  img.value = empty_img.value;
}
function previewImg(){
  uni.previewImage({
    current : 0,
      urls: [img.value],
      longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function(data) {

      },
          fail: function(err) {

          }
      }
  });
}
function uploadImg(){
  let _this = this;
  uni.chooseImage({
      count: 1, //默认9
      sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
      success: function (res) {
      console.log('选择相册后的文件列表：',JSON.stringify(res.tempFilePaths));
      }
  });
}
initValue();
</script>

<style lang="scss" scoped>	
.container{
	background-color: #ffffff;
}
.bg-color{
	background-color: #FDDC2D;
}
.expenditure-list, .income-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.list-box{
	background-color: #f7f7f7;
	margin: 30rpx 30rpx 0 30rpx;
	border-radius: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	
	width: 110rpx;
	height: 110rpx;
	display:flex; 
	justify-content:center;
	align-items:center;
}
.select-item{
	background-color: #FDDC2D;
}
.box-icon{
	width: 55rpx;
	height: 55rpx;
}
.box-text{
	font-size: 25rpx;
	color: #606266;
}

.popup_box{
	padding: 30rpx;
	
	.del-btn{
		position: absolute;
		top: 5rpx;
		left: 645rpx;
		z-index: 10;
		
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	
	}
}
.popup_line{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 26rpx 32rpx;
	font-size: 28rpx;
	line-height: 54rpx;
	color: #606266;
	background-color: #fff;
	text-align: left;
}
.popup_icon {
	width: 50rpx;
	height: 50rpx;
	margin-right: 30rpx;
}
.popup_type{
	font-size: 28rpx;
	padding-right: 30rpx;
}
.u-cell__right-icon-wrap {
	display: inline-flex;
	align-items: center;
	padding-left: 10rpx;
}
.photo_icon{
	width: 100rpx;
	height: 100rpx;
	margin-left: auto;
}
	
</style>
